<template>
  <div id="view-login">
    <div class="login-left">
      <span class="intro">{{ intro }}</span>
    </div>
    <div class="login-right">
      <div class="login-container">
        <h2>W E P A R T Y</h2>
        <h1>登录</h1>

        <!-- 登录表单 -->
        <a-form-model ref="ruleForm" :model="form" :rules="rules">
          <!-- 账号 -->
          <a-form-model-item ref="username" prop="username">
            <a-input size="large" v-model="form.username" placeholder="Username"
              ><a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0, 0, 0, 0.25)"
            /></a-input>
          </a-form-model-item>
          <a-form-model-item ref="password" prop="password">
            <a-input
              size="large"
              v-model="form.password"
              type="password"
              placeholder="Password"
              ><a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-model-item>

          <!-- 密码 -->
          <a-form-model-item>
            <a-button block type="primary" @click="onLogin"> Login </a-button>
          </a-form-model-item>
        </a-form-model>
        <!-- 注册 -->
        <div class="register-container">
          <span>
            没有账号？
            <router-link to="./register">注册</router-link>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import RequestUtils from "../../utils/requestUtils";

export default {
  name: "Login",
  data() {
    return {
      intro:
        "Join WeParty to release and participate in campus activities more conveniently! Join WeParty to release and participate in campus activities more conveniently!",
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "Please input username",
            trigger: "change",
          },
        ],
        password: [
          {
            required: true,
            message: "Please input password",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    onLogin() {
      let that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let username = that.form.username;
          let password = that.form.password;
          console.log(`username=${username}, password=${password}`);
          // Send login post
          RequestUtils.requestLogin(
            that,
            username,
            password,
            function (res) {
              console.log(res);
              if (res.status == 200) {
                let data = res.data;
                let result = data.result;
                if (data.error_code == 0) {
                  // Save id and token
                  // Set into session storage after requesting user info successfully
                  // id is the PRIMARY KEY in database of back-end
                  
                  // that.GLOBAL.id = result.id;
                  // that.GLOBAL.token = result.token;
                  const id = result.id;
                  const token = result.token;

                  // Request user info to get permission(administer or not)
                  RequestUtils.requestUserInfo(
                    that, 
                    id, 
                    function(res) {
                      console.log(res);
                      if (res.status == 200) {
                        let result = res.data.result;
                        let permission = result.permission;
                        // Set permission into session storage
                        sessionStorage.setItem("permission", JSON.stringify(permission));
                        // Set id and token into sessionStorage
                        sessionStorage.setItem("id", id);
                        sessionStorage.setItem("token", token);
                        // Route back
                        that.$router.back();
                      } else {
                        that.$message.error("请求用户信息失败");
                      }
                    }, 
                    function(error) {
                      console.log(error);
                      that.$message.error("登录失败，请求用户信息失败请稍后重试");
                    });

                  
                } else {
                  that.$message.error("账号密码不正确");
                }
              } else {
                if (res.data.error_code == -1) {
                  that.$message.error("账号密码不正确");
                } else {
                  that.$message.error(
                    `登录失败，error_code=${res.data.error_code}`
                  );
                }
              }
            },
            (error) => {
              console.error(error);
              that.$message.error("登录失败请稍后重试");
            }
          );

          // that.axios
          //   .post(`${that.GLOBAL.site}/login`, {
          //     account: that.account,
          //     password: that.password,
          //   })
          //   .then(function (res) {
          //     console.log(res);
          //     if (res.status == 200) {
          //       console.log(res);
          //       let data = res.data;
          //       let result = data.result;
          //       // Set id and token
          //       // id is the PRIMARY KEY in database of back-end
          //       that.GLOBAL.id = result.id;
          //       that.GLOBAL.token = result.token;

          //       // Route back
          //       if (data.error_code == 0) {
          //         that.$router.back();
          //       }
          //     } else {
          //       that.$message.error(
          //         `获取个人信息失败，error_code=${res.data.error_code}`
          //       );
          //     }
          //   })
          //   .catch(function (error) {
          //     console.error(error);
          //     that.$message.error("账号密码不正确");
          //   });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.center() {
  align-items: center;
  justify-content: center;
}

#view-login {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;

  @media (max-width: 960px) {
    .login-left {
      display: none;
    }
  }

  .login-left {
    background: url("https://gushichen.gitee.io/img/post-bg-rwd.jpg") center
      center no-repeat;
    width: 40%;
    height: 100%;
    position: relative;
    span {
      position: absolute;
      color: white;
      bottom: 52px;
      margin: 0 30px 10% 30px;
      font-size: 16px;
    }
  }

  .login-right {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    .center();
    h2 {
      color: #bfbfbf;
    }
    h1 {
      margin: 0 0 36px 0;
      font-size: 52px;
    }
    .login-form-item {
      display: flex;
      justify-content: center;
    }

    .login-container {
      width: 40%;
    }
  }
}
</style>